import React from 'react';
import Calendar from '../Calendar';
import AdjustSchedule from '../AdjustSchedule';

export default () => {
    const [date, setDate] = React.useState();
    const wrapRef = React.useRef();
    const calendarRef = React.useRef();
    const scheduleRef = React.useRef();
    const [scheduleHeight, setScheduleHeight] = React.useState(0);

    const adjustScheduleHeight = () => {
        setScheduleHeight(wrapRef.current.offsetHeight - calendarRef.current.offsetHeight);
    };

    const handleExpandChange = () => {
        setTimeout(() => {
            adjustScheduleHeight();
        });
    };

    const calendarProps = {
        value: date,
        onChange: setDate,
        onExpandChange: handleExpandChange
    };

    React.useEffect(() => {
        adjustScheduleHeight();
    }, []);

    return (
        <div ref={wrapRef} style={{ height: '100%', overflow: 'hidden' }}>
            <div ref={calendarRef}>
                <Calendar {...calendarProps} />
            </div>
            <div ref={scheduleRef}>
                <AdjustSchedule height={scheduleHeight} />
            </div>
        </div>
    );
};
